<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度首页</title>
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    <link rel="stylesheet" href="index.css">
    <script src="./vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <div id="head">
            <!-- 左上 -->
            <div id="s-top-left" class="s-top-left s-isindex-wrap"><a href="http://news.baidu.com" target="_blank"
                    class="mnav c-font-normal c-color-t">新闻</a><a href="https://www.hao123.com" target="_blank"
                    class="mnav c-font-normal c-color-t">hao123</a><a href="http://map.baidu.com" target="_blank"
                    class="mnav c-font-normal c-color-t">地图</a><a href="https://live.baidu.com/" target="_blank"
                    class="mnav c-font-normal c-color-t">直播</a><a href="https://haokan.baidu.com/?sfrom=baidu-top"
                    target="_blank" class="mnav c-font-normal c-color-t">视频</a><a href="http://tieba.baidu.com"
                    target="_blank" class="mnav c-font-normal c-color-t">贴吧</a><a href="http://xueshu.baidu.com"
                    target="_blank" class="mnav c-font-normal c-color-t">学术</a>
                <div class="mnav s-top-more-btn"><a href="http://www.baidu.com/more/" name="tj_briicon"
                        class="s-bri c-font-normal c-color-t" target="_blank">更多</a>
                    <div class="s-top-more" id="s-top-more">
                        <div class="s-top-more-content row-1 clearfix"><a href="https://pan.baidu.com" target="_blank"
                                name="tj_wangpan"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baiduyun@2x-e0be79e69e.png">
                                <div class="s-top-more-title c-font-normal c-color-t">网盘</div>
                            </a><a href="https://zhidao.baidu.com" target="_blank" name="tj_zhidao"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/zhidao@2x-e9b427ecc4.png">
                                <div class="s-top-more-title c-font-normal c-color-t">知道</div>
                            </a><a href="https://baike.baidu.com" target="_blank" name="tj_baike"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baike@2x-1fe3db7fa6.png">
                                <div class="s-top-more-title c-font-normal c-color-t">百科</div>
                            </a><a href="http://image.baidu.com" target="_blank" name="tj_img"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png">
                                <div class="s-top-more-title c-font-normal c-color-t">图片</div>
                            </a></div>
                        <div class="s-top-more-content row-2 clearfix"><a href="https://baobao.baidu.com"
                                target="_blank" name="tj_baobaozhidao"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baobaozhidao@2x-af409f9dbe.png">
                                <div class="s-top-more-title c-font-normal c-color-t">宝宝知道</div>
                            </a><a href="https://wenku.baidu.com" target="_blank" name="tj_wenku"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/wenku@2x-f3aba893c1.png">
                                <div class="s-top-more-title c-font-normal c-color-t">文库</div>
                            </a><a href="https://jingyan.baidu.com" target="_blank" name="tj_jingyan"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/jingyan@2x-e53eac48cb.png">
                                <div class="s-top-more-title c-font-normal c-color-t">经验</div>
                            </a><a href="http://music.taihe.com" target="_blank" name="tj_mp3"><img
                                    src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yinyue@2x-c18adacacb.png">
                                <div class="s-top-more-title c-font-normal c-color-t">音乐</div>
                            </a></div>
                        <div class="s-top-tomore"><a class="c-color-gray2 c-font-normal"
                                href="http://www.baidu.com/more/" target="_blank" name="tj_more">查看全部百度产品 &gt;</a></div>
                    </div>
                </div>
            </div>
            <!-- 右上 -->
            <div id="u1" class="s-top-right s-isindex-wrap">
                <span class="s-top-right-text c-font-normal c-color-t" id="s-usersetting-top"
                    name="tj_settingicon">设置</span>
                <a class="s-top-login-btn c-btn c-btn-primary c-btn-mini lb"
                    href="https://passport.baidu.com/v2/?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F&amp;sms=5"
                    name="tj_login" onclick="return false;">登录</a>
                <div id="s-user-setting-menu" class="s-top-userset-menu c-floating-box c-font-normal">
                    <div class="s-user-setting-pfmenu"><a class="setpref" href="javascript:;">搜索设置</a><a
                            href="//www.baidu.com/gaoji/advanced.html" target="_blank">高级搜索</a><a
                            href="javascript:;">关闭预测</a><a href="https://www.baidu.com/duty/privacysettings.html"
                            target="_blank">隐私设置</a></div><a class="s-set-hotsearch set-hide"
                        href="javascript:;">关闭热榜</a><a class="s-set-hotsearch set-show" href="javascript:;"
                        style="display: none;">开启热榜</a>
                </div>
                <div class="guide-info "><i class="c-icon guide-icon"></i><span>牛年贺岁，登录设置新春皮肤！</span><i
                        class="c-icon guide-close"></i></div>
            </div>
        </div>

        <!-- logo区域 -->
        <div class="logo">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="点击一下，了解更多">
        </div>
        <!-- 搜索区域 -->
        <div class="search-box">
            <span class="search-area">
                <!-- 聚焦和失焦时再次重新设置inputFocus数据的值 -->
                <input type="text" maxlength="255" v-model="inputVal" @blur="()=>inputFocus=false"
                    @focus="()=>inputFocus=true">
                <!-- <span class="icon icon-paizhao"></span> -->
                <span class="icon-search">

                </span>
            </span>
            <span class="search-btn">百度一下</span>
        </div>
        <!-- 搜索展示区 -->
        <!-- 失焦时不显示，聚焦时根据searchResList数组是否有长度决定显示还是隐藏 -->
        <ul class="search-list" v-show="inputFocus&&searchResList.length">
            <li v-for="search in searchResList">{{ search}}</li>
        </ul>

        <!-- 下面头条 -->
        <div id="s-hotsearch-wrapper" class="s-isindex-wrap s-hotsearch-wrapper">
            <div class="s-hotsearch-title"><a class="hot-title" href="http://top.baidu.com/?fr=mhd_card"
                    target="_blank">
                    <div class="title-text c-font-medium c-color-t">百度热榜</div>
                </a><a id="hotsearch-refresh-btn" class="hot-refresh c-font-normal c-color-gray2">
                    <img class="huanyihuan"
                        src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229520286,909887626&fm=26&gp=0.jpg"
                        alt="换一换">
                    <span class="hot-refresh-text">换一换</span></a></div>
            <ul class="s-hotsearch-content" id="hotsearch-content-wrapper">
                <li class="hotsearch-item odd firstNews" data-index="0"><a
                        class="title-content c-link c-font-medium c-line-clamp1"
                        href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%8D%AB%E8%A7%86%E6%98%A5%E6%99%9A&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1"
                        target="_blank"><span
                            class="title-content-index c-index-single c-index-single-hot1">1</span><span
                            class="title-content-title">直播：各地春晚看不停</span><span
                            class="title-content-mark c-text c-gap-left-small c-text-hot">热</span></a></li>
                <li class="hotsearch-item even" data-index="3"><a
                        class="title-content c-link c-font-medium c-line-clamp1"
                        href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%85%A8%E5%9B%BD%E5%8E%8B%E5%B2%81%E9%92%B1%E5%9C%B0%E5%9B%BE%E5%87%BA%E7%82%89&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1"
                        target="_blank"><span
                            class="title-content-index c-index-single c-index-single-hot4">4</span><span
                            class="title-content-title">全国压岁钱地图出炉</span><span
                            class="title-content-mark c-text c-gap-left-small "></span></a></li>
                <li class="hotsearch-item odd" data-index="1"><a
                        class="title-content c-link c-font-medium c-line-clamp1"
                        href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E5%A4%A9%E9%97%AE%E4%B8%80%E5%8F%B7%E7%81%AB%E6%98%9F%E6%8D%95%E8%8E%B7%E8%BF%87%E7%A8%8B%E5%BD%B1%E5%83%8F%E5%8F%91%E5%B8%83&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1"
                        target="_blank"><span
                            class="title-content-index c-index-single c-index-single-hot2">2</span><span
                            class="title-content-title">天问一号火星捕获过程影像发布</span><span
                            class="title-content-mark c-text c-gap-left-small "></span></a></li>
                <li class="hotsearch-item even" data-index="4"><a
                        class="title-content c-link c-font-medium c-line-clamp1"
                        href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E6%B6%88%E9%98%B2%E5%91%98%E9%99%A4%E5%A4%95%E5%B9%B4%E5%A4%9C%E9%A5%AD%E5%90%83%E5%88%B0%E4%B8%80%E5%8D%8A%E5%87%BA%E8%AD%A6%E4%BA%86&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1"
                        target="_blank"><span
                            class="title-content-index c-index-single c-index-single-hot5">5</span><span
                            class="title-content-title">消防员除夕年夜饭吃到一半出警了</span><span
                            class="title-content-mark c-text c-gap-left-small "></span></a></li>
                <li class="hotsearch-item odd" data-index="2"><a
                        class="title-content c-link c-font-medium c-line-clamp1"
                        href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E7%89%9B%E5%B9%B4%E9%A6%96%E6%97%A5%E7%94%B5%E5%BD%B1%E7%A5%A8%E6%88%BF%E8%B6%8517%E4%BA%BF%E5%85%83&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1"
                        target="_blank"><span
                            class="title-content-index c-index-single c-index-single-hot3">3</span><span
                            class="title-content-title">牛年首日电影票房超17亿元</span><span
                            class="title-content-mark c-text c-gap-left-small c-text-new">新</span></a></li>
                <li class="hotsearch-item even" data-index="5"><a
                        class="title-content c-link c-font-medium c-line-clamp1"
                        href="https://www.baidu.com/s?cl=3&amp;tn=baidutop10&amp;fr=top1000&amp;wd=%E6%9C%B1%E5%B9%BF%E6%9D%83%E6%AE%B5%E5%AD%90%E7%89%88%E6%98%A5%E8%8A%82%E7%A5%9D%E7%A6%8F&amp;rsv_idx=2&amp;rsv_dl=fyb_n_homepage&amp;hisfilter=1"
                        target="_blank"><span
                            class="title-content-index c-index-single c-index-single-hot6">6</span><span
                            class="title-content-title">朱广权段子版春节祝福</span><span
                            class="title-content-mark c-text c-gap-left-small "></span></a></li>
            </ul>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="bottom_layer" class="s-bottom-layer s-isindex-wrap">
        <div class="s-bottom-layer-content">
            <p class="lh"><a class="text-color" href="//www.baidu.com/cache/setindex/index.html"
                    target="_blank">设为首页</a></p>
            <p class="lh"><a class="text-color" href="//home.baidu.com" target="_blank">关于百度</a></p>
            <p class="lh"><a class="text-color" href="http://ir.baidu.com" target="_blank">About Baidu</a></p>
            <p class="lh"><a class="text-color"
                    href="https://isite.baidu.com/site/e.baidu.com/d38e8023-2131-4904-adf7-a8d1108f51ef?refer=888"
                    target="_blank">百度营销</a></p>
            <p class="lh"><a class="text-color" href="//www.baidu.com/duty" target="_blank">使用百度前必读</a></p>
            <p class="lh"><a class="text-color" href="//help.baidu.com/newadd?prod_id=1&amp;category=4"
                    target="_blank">意见反馈</a></p>
            <p class="lh"><a class="text-color" href="//help.baidu.com" target="_blank">帮助中心</a></p>
            <p class="lh"><a class="text-color"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"
                    target="_blank">京公网安备11000002000001号</a></p>
            <p class="lh"><a class="text-color" href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a></p>
            <p class="lh f12"><span class="text-color">©2021&nbsp;Baidu&nbsp;</span></p>
            <p class="lh f12"><span class="text-color">(京)-经营性-2017-0020</span></p>
        </div>
    </div>
    <script src="./index.js"></script>
</body>

</html>